<template>
  <div id="app" class="changeInfo">
    <transition name="slide-fade">
      <template v-if="logined">
        <router-view></router-view>
      </template>
    </transition>
    <template v-if="loginError">
      <div style="text-align:center">
        <span>登陆失败,请稍后重试</span>
      </div>
    </template>

    <div v-transfer-dom class="toast-modify">
      <loading v-model="loading" :text="text"></loading>
    </div>
  </div>
</template>

<script>
import { Loading, TransferDomDirective as TransferDom } from 'vux'
import api from '@/api'
import { wxconfig } from '@/config/sdk'
import XSDK from 'xlink-jssdk'
export default {
  name: 'app',
  data () {
    return {
      loading: true,
      loginError: false,
      logined: false,
      openId: '',
      userId: '',
      cigarOpenId: '',
      cigarUserId: '',
      text: '正在刷新请稍后'
    }
  },
  directives: {
    TransferDom
  },
  components: {
    Loading
  },
  methods: {
    // 1: 获取openId和userId
    // 2: 存到localStorage
    // 3: 连接socket, 存取到vuex
    async login () {
      this.logined = false
      this.loading = true
      // 先获取openId和userId 雪茄柜和红酒柜有不同的openId
      // if (window.localStorage.getItem('openId') && window.localStorage.getItem('userId')) {
      //   this.openId = window.localStorage.getItem('openId')
      //   this.userId = window.localStorage.getItem('userId')
      // } else {
      //   let {data: {open_id: openId, user_id: userId}} = await api.getOpenId()
      //   window.localStorage.setItem('openId', openId)
      //   window.localStorage.setItem('userId', userId)
      //   this.openId = openId
      //   this.userId = userId
      // }
      let {data: {open_id: openId, user_id: userId}} = await api.getOpenId()
      window.localStorage.setItem('openId', openId)
      window.localStorage.setItem('userId', userId)
      this.openId = openId
      this.userId = userId
      // 通过openId获取token
      let {data: {access_token: accessToken, authorize}} = await api.getUserAuthorize(this.openId)
      window.localStorage.setItem('accessToken', accessToken)
      window.localStorage.setItem('authorize', authorize)
      wxconfig()
      this.logined = true
      this.loading = false
      await this.$store.dispatch('control/fetchDeviceList')
      // 连接socket
      let ws = new XSDK('websocket', {
        host: 'http://cm2.xlink.cn:23777',
        userid: this.userId,
        authorize: authorize,
        dp_version: 2
      })
      let devices = this.$store.getters['control/deviceList']
      ws.on('ready', function () {
        ws.emit('adddevices',
          devices
        )
      })
      .on('devicesready', (devices) => {
        this.$store.dispatch('control/socketList', devices)
      })
    }
  },
  mounted () {
    this.login()
  }
}
</script>

<style lang="less" >
@import '~vux/src/styles/reset.less';
html,body,#app {
  width: 100%;
  height: 100%;
}

/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active, {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-active {
  transform: translateX(10px);
  opacity: 0;
}
.fl {
      float: left;
}
.fr {
  float: right;
}
.clearfix {
  *zoom: 1;
  &:before, &:after {
    display: table; 
    line-height: 0; 
    content: "";
    clear: both; 
  }
}
.pl {
  padding-left: 15px;
}
.pr {
  padding-left: 15px;
}
.pt {
  padding-left: 15px;
}
.pb {
  padding-left: 15px;
}

.toast-modify {
  .vux-loading {
    .weui-toast {
      width: 10.6em;
      height: 10.6em;
      min-height: 10.6em;
    }
  }
}
.changeInfo, .vux-toast {
  .weui-toast {
    width: 10.6em !important;
    height: 10.6em;
    min-height: 10.6em;
  }
}

#__vconsole {
  .vc-switch {
    // visibility: hidden;
    right: auto;
    bottom: auto;
    top: 30px;
    left: 0px;
  }
}
</style>
